<!-- home -->
<template>
  <div class="about-container">
    <van-nav-bar class="nav-bar">
      <div slot="title" class="title-slot">{{ studentInfo.username }}</div>
      <template #left>
        <van-image
          round
          width="70px"
          height="70px"
          fit="cover"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
          class="img-cover"
        />
      </template>
    </van-nav-bar>

    <van-cell title="姓名" style="margin-top: 10px">
      <div>{{ studentInfo.name }}</div>
    </van-cell>
    <van-cell title="学号">
      <div>{{ studentInfo.number }}</div>
    </van-cell>
    <van-cell title="住址">
      <div>{{ studentInfo.location }}</div>
    </van-cell>
    <van-cell title="电话">
      <div>{{ studentInfo.telephone }}</div>
    </van-cell>

    <van-button style="width: 90%;margin-left: 5%" type="danger" size="large" round class="btn-loginout" @click="logout">退出登录</van-button>
  </div>
</template>

<script>
// 请求接口
import { mapGetters } from 'vuex'
import { removeItem } from '@/utils/storge'
export default {
  data() {
    return {
      studentInfo: {}
    }
  },
  computed: {
    ...mapGetters(['uid'])
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      const data = await this.$api.user.getStudentInfo(this.uid)
      console.log(data)
      this.studentInfo = data.data.content[0]
    },
    async logout() {
      const data = await this.$api.user.StuLogout()
      removeItem('uid')
      removeItem('user-Token')
      console.log(data)
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss" scoped>
.about-container {
  width: 100%;
  height: 100%;
  .nav-bar {
    margin-top: 50px;
    width: 100%;
    height: 100px;

    .img-cover {
      margin-top: 50px;
    }
    .title-slot {
      margin-right: 100px;
      margin-top: 50px;
    }
  }
  .btn-loginout {
    margin-top: 50%;
  }
}
</style>
